<template>
	<view>
		<cu-custom bgColor="bg-blue-light" title="工程领域拖欠农民工工资"></cu-custom>
		<view class="bg-blue-light" style="height: 150rpx;border-radius: 0 0 50rpx 50rpx;"></view>
		<view class="card" style="height: 304rpx;margin-top: -150rpx;">
			<view class="head">欠薪基本情况摘要</view>
			<zh-input
				v-model="arreardesc"
				placeholder="请将欠薪过程描述清楚，并控制在500字以内"
				type="textarea"
				inputMaxlength="500"
				inputAlign="left"
				class="textarea"
				:autoHeight="false"
			></zh-input>
		</view>
		<view class="card" style="height: 613rpx;margin-top: 174rpx;">
			<view class="head">
				是否通过以下途径反映过
			</view>
			<radio-group class="block" @change="RadioChange" style="margin-left: 30rpx;">
				<view class="selectText" style="margin-top: 0rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='notProject'?'checked':''" 
					:checked="radio=='notProject'?true:false" value="1"></radio>
					<label class="selectText">向劳动保障监察机构投诉</label>
				</view>
				<view class="selectText" style="margin-top: 29rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='project'?'checked':''" 
					:checked="radio=='project'?true:false" value="2"></radio>
					<label class="selectText">向劳动人事争议仲裁机构申请仲裁</label>
				</view>
				<view class="selectText" style="margin-top: 29rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='project'?'checked':''" 
					:checked="radio=='project'?true:false" value="3"></radio>
					<label class="selectText">向人民法院提起诉讼</label>
				</view>
				<view class="selectText" style="margin-top: 29rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='project'?'checked':''" 
					:checked="radio=='project'?true:false" value="0"></radio>
					<label class="selectText">未经过以上途径反映过</label>
				</view>
			</radio-group>
			<view style="margin-top: 60rpx;">
				<zh-input v-model="details" placeholder="请详细说明情况，并控制在200字以内"
				type="textarea" inputMaxlength="200" inputAlign="left" class="textarea"
				:autoHeight="false"></zh-input>
			</view>
		</view>
		<view class="card" style="height: 231rpx;margin-top: 807rpx;">
			<view class="head">验证码</view>
			<view class="cu-form-group">
				<input type="text" maxlength="8" name="" v-model="imgCode" placeholder="请输入验证码" />
				<image :src="imgSrc" @click="initCode" mode="" class="img-captcha"></image>
			</view>
		</view>
		<view class="button flex flex-direction" style="padding-top: 10rpx;margin-left: 40rpx;">
			<button class="cu-btn shadow margin-tb-sm lg bg-blue-light" style="background-color: #1388ED;" @tap="up">上一步</button>
		</view>
		<view class="button flex flex-direction" style="padding-top: 10rpx;margin-left: 400rpx;">
			<button class="cu-btn shadow margin-tb-sm lg bg-blue-light" style="background-color: #1388ED;" @tap="sumit">提交</button>
		</view>
	</view>
</template>

<script>
import util from '@/common/util/util.js';
import reqConfig from '@/common/config/reqConfig.js';
import api from '@/api/society/home/nobackpay.js';
export default {
	data() {
		return {
			pageId: '',
			imgSrc: '',
			imgCode: '',
			entryname: '',
			aae006: '',
			aab301: '',
			aab004: '',
			aab013: '',
			aab013call: '',
			generalconame: '',
			branchconame: '',
			teamleader: '',
			teamleadercall: '',
			resname: '',
			resphone: '',
			residcard: '',
			arrearnum: '',
			arrearamount: '',
			arreartime: '',
			arreardesc: '',
			details: '',
			radio:0,
			reactiontype:'0'
		};
	},
	onReady() {
		this.pageId = util.uuid();
	},
	onLoad: function(option) {
		this.initCode();
		if (this.$Route.query) {
			this.entryname = this.$Route.query.entryname;
			this.aab004 = this.$Route.query.aab004;
			this.aab013 = this.$Route.query.aab013;
			this.aab013call = this.$Route.query.aab013call;
			this.aab301 = this.$Route.query.aab301;
			this.aab015 = this.$Route.query.aab015;
			this.aae006 = this.$Route.query.aae006;
			this.generalconame = this.$Route.query.generalconame;
			this.branchconame = this.$Route.query.branchconame;
			this.teamleader = this.$Route.query.teamleader;
			this.teamleadercall = this.$Route.query.teamleadercall;
			this.resname = this.$Route.query.resname;
			this.resphone = this.$Route.query.resphone;
			this.residcard = this.$Route.query.residcard;
			this.arrearnum = this.$Route.query.arrearnum;
			this.arrearamount = this.$Route.query.arrearamount;
			this.arreartime = this.$Route.query.arreartime;
		}
		console.log(this.aab013call);
	},
	methods: {
		RadioChange(e){
				 		this.radio = e.detail.value
						this. reactiontype= this.radio
						console.log(this.reactiontype)
					},
		initCode() {
			const url = reqConfig.baseUrl + '/app/api/person/getImgCode?pageId=' + this.pageId + '&time=' + new Date().getTime();
			this.imgSrc = url;
		},
		initCode() {
			const url = reqConfig.baseUrl + '/app/api/person/getImgCode?pageId=' + this.pageId + '&time=' + new Date().getTime();
			this.imgSrc = url;
		},
		up: function() {
			let a = this.$Router.back(1);
			if (a == undefined) {
				//重新定向跳转页面
				this.$Router.replaceAll({ name: 'noBackPayIndex' });
			} else {
				this.$Router.back(1);
			}
		},
		sumit: function() {
			const data = {};
			const that = this;
			data.entryname = this.entryname;
			data.aab004 = this.aab004;
			data.aab013 = this.aab013;
			data.aab013call = this.aab013call;
			data.aab015 = this.aab015;
			data.aab301 = this.aab301;
			data.aae006 = this.aae006;
			data.generalconame = this.generalconame;
			data.branchconame = this.branchconame;
			data.teamleader = this.teamleader;
			data.teamleadercall = this.teamleadercall;
			data.resname = this.resname;
			data.resphone = this.resphone;
			data.residcard = this.residcard;
			data.arrearnum = this.arrearnum;
			data.arrearamount = this.arrearamount;
			data.arreartime = this.arreartime;
			data.arreardesc = this.arreardesc;
			data.details = this.details;
            data.reactiontype = this.reactiontype;
			console.log(data)
			this.$http
				.post(api.proj, data)
				.then(res => {
					uni.showModal({
						title: '提示',
						content: '提交成功，感谢您的反馈',
						success: function(res) {
							that.$Router.push({ name: 'noBackPayIndex' });
						}
					});
				})
				.catch(error => {});
		},
	}
};
</script>

<style>
page {
	background-color: #f6f6f6;
}
.card {
	background: #ffffff;
	border-radius: 20rpx;
	width: 690rpx;
	position: absolute;
	margin-left: 30rpx;
	/* padding-left: 31rpx; */
}
.button {
	position: absolute;
	margin-top: 1099rpx;
	width: 320rpx;
}
.head {
	height: 87rpx;
	width: 690rpx;
	line-height: 87rpx;
	font-family: 'PingFangTC-Medium';
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
	letter-spacing: 0;
	margin-left: 30rpx;
}
.textarea {
	height: 175rpx;
	width: 613rpx;
	background-color: #f6f6f6;
	/* line-height: 40rpx; */
	letter-spacing: 2;
	word-wrap: break-word;
}
.selectText {
	font-family: 'PingFangSC-Regular';
	font-size: 30rpx;
	color: #333333;
	letter-spacing: 0;
	height: 42rpx;
	line-height: 42rpx;
}
.img-captcha {
	width: 200rpx;
	line-height: 70rpx;
	height: 70rpx;
	text-align: center;
	margin: 0;
}
</style>
